<template>
  <div class="page">
    <header class="header">
      <h2>🌿 询问植物专家</h2>
      <p>向我们的植物专家团队提问，获得专业的养护建议</p>
    </header>

    <main class="main">
      <el-input
        v-model="question"
        type="textarea"
        placeholder="请输入您的问题，例如：‘我的番茄叶子发黄，是怎么回事？’"
        rows="5"
        clearable
      />
      <el-button type="success" round class="submit-btn">提交问题</el-button>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const question = ref('')
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #d4f7dc, #f0fff4);
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}
.header h2 {
  color: #2e7d32;
}
.header p {
  color: #388e3c;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.submit-btn {
  align-self: center;
  width: 200px;
  font-size: 16px;
}
</style>
